<!--
    Va-Button 《一般用于图标或文字按钮》

    使用方式：
        <va-button class="value-item"
                   icon="el-icon-error"
                   size="mini"
                   @click="deleteSearchData(i),action(searchVal)"
        />
-->

<template>
    <el-button class="va-button"
               :style="iStyle"
               :type="type"
               :size="size"
               :icon="iconDate"
               v-on:mouseover="changeActive"
               v-on:mouseout="removeActive">
    </el-button>
</template>

<script>

    import { toRefs,ref } from 'vue'
    export default {
        name: "Va-Button",
        props:{
            type:{
                type:String,
                default:'text'
            },
            //图标
            icon:{
                type:String,
                default:null
            },
            //图标大小
            iconSize:{
                type:String,
                default:'25px'
            },
            //悬浮时图标
            variationIcon:{
                type:String,
                default:null
            },
            size:{
                type:String,
                default:"small"
            }
        },
        created(){

        },
        setup(props){
            const iStyle = {'font-size': props.iconSize,'line-height':props.iconSize}
            const { icon,variationIcon } = toRefs(props)
            let iconDate = ref(icon.value)
            //悬浮时调用的方法
            function changeActive() {
                if(variationIcon.value){
                    iconDate.value = variationIcon.value
                }

            }
            //离开时调用的方法
            function removeActive() {
                iconDate.value = icon.value
            }

            return {changeActive,removeActive,iconDate,iStyle}
        }
    }
</script>

<style lang="less" scoped>
.va-button{

    /deep/ i{
        margin-left: 5px;
    }
}
.va-button:hover i{

        color: #000;
}
.va-button:focus i{
    /*color: #fff;*/
}
</style>